<template>
    <div class="div">
        <div class="nav">
            <div class="list" :class="navid == item.id ? 'iscolor' : ''" @click="clicknav(item)"
                v-for="(item, index) in navlist">
                {{
                    item.word }}</div>
        </div>

    </div>
</template>
<script>
export default {
    name: "",
    data() {
        return {
            navlist: [
                { word: "我的班级", id: "1" },
                { word: "树人优课", id: "2" },
                { word: "试听课", id: "3" },
                { word: "教师专用", id: "4" }
            ],
            navid: ""
        };
    },
    methods: {
        clicknav(item) {
            this.navid = item.id
        },
        changechack() {
            localStorage.setItem("checked", this.checked);
        },
        changeeye() {
        },
    },
    created() {
        if (localStorage.getItem("checked") != null) {
            this.checked = Boolean(localStorage.getItem("checked"));
            console.log(this.checked);
        }
    }
};
</script>
<style lang="scss">
.nav {
    div {
        float: left;
        display: block;
        font-size: 20px;
        margin: 0 10px;
    }
}

.iscolor {
    color: red;
}
</style>